<template>
	<view>
		<!-- 此处禁用图片预览，为了防止uni.previewImage触发onhide引起type5悬浮窗 -->
		<uni-file-picker v-if="mediaType=='image'" ref="file_picker" v-model="imageValue" fileMediatype="image"
			:auto-upload="false" :limit="12" mode="grid" :image-styles="imageStyles" :disable-preview="true"
			@delete="afterDeleteFile" @select="afterSelect" />

		<uni-file-picker v-if="mediaType=='video'" ref="file_picker" v-model="videoValue" fileMediatype="video"
			:auto-upload="false" :limit="6" mode="grid" @delete="afterDeleteFile" @select="afterSelect"
			file-extname="mp4" />
	</view>
</template>

<script>
	export default {
		name: "FileUploader",
		props: ["mediaType", "initFileList"],
		data() {
			return {
				imageStyles: {
					width: 200,
					height: 200,
					border: {
						color: "#eee",
						width: 2,
						style: 'dashed',
						radius: '2px'
					}
				},
				imageValue: [],
				videoValue: [],
			};
		},
		mounted() {
			this.$refs.file_picker.files = this.initFileList.map(item => {
				return {
					progress: 99,
					url: item
				}
			})
		},
		methods: {
			// 获取上传状态
			afterSelect(e) {
				console.log('选择文件：', e)
				const allFiles = this.$refs.file_picker.files;
				e.tempFiles.forEach((tempFile, index) => {

					const file = allFiles.find(file => file.cloudPath == tempFile.cloudPath);

					//视频则检查长度
					if (tempFile.video) {
						if (tempFile.file.duration > 60 * 20) {
							uni.showToast({
								title: "上传视频长度请勿超过20分钟",
								icon: 'none',
								duration: 3000
							});
							let index = allFiles.findIndex(file => file.cloudPath == tempFile.cloudPath);
							allFiles.splice(index, 1);
							this.afterDeleteFile();
							return
						}
					}

					const OSS_URL = this.$store.state.appConfig.OSSURL;
					const uploadTask = uni.uploadFile({
						url: OSS_URL,
						formData: {
							key: `student/${this.$store.state.session.userId}/upload/${file.cloudPath}`,
							success_action_status: '200' //让服务端返回200,不然，默认会返回204
						},
						filePath: tempFile.path,
						name: 'file',
						// timeout: 60 * 1000,//默认上传超时为1分钟
						success: (uploadFileRes) => {
							console.log("uploadFileRes", uploadFileRes);
							if (uploadFileRes.statusCode == 200) {
								// this.$store.commit("removeUploadTask", uploadTask._callbackId);
								file.status = "success";
								file.url =
									`${OSS_URL}/student/${this.$store.state.session.userId}/upload/${file.cloudPath}`;
								console.log("allFiles", allFiles)
								this.$emit("uploadFileList", allFiles.filter(item => item.status ==
									"success").map(item => item.url))
							}
						},
						fail: () => {
							uni.showToast({
								title: "文件上传异常",
								icon: 'none',
								duration: 3000
							});

							let index = allFiles.findIndex(file => file.cloudPath == tempFile
								.cloudPath);
							allFiles.splice(index, 1);
							this.afterDeleteFile();
							// this.$store.commit("removeUploadTask", uploadTask._callbackId);
						}
					});

					// this.$store.commit("addUploadTask", uploadTask._callbackId);

					uploadTask.onProgressUpdate((res) => {
						file.progress = res.progress;
						// 测试条件，取消上传任务。
						// if (res.progress > 50) {
						// 	uploadTask.abort();
						// }
					});
				})
			},
			afterDeleteFile() {
				const allFiles = this.$refs.file_picker.files;
				console.log("allFiles", allFiles)
				this.$emit("uploadFileList", allFiles.map(item => item.url))
			}

		}
	}
</script>

<style>

</style>